<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{common/header::head}"></th:block>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/collection.css}">
    <title th:text="${loginUser.nickName}+'的收藏-云沾衣诗词网-入云深处亦沾衣'">云沾衣诗词网-入云深处亦沾衣</title>

</head>
<body>
<div th:insert="~{common/header :: profile_nav}"></div>
<div class="container full">
    <div class="row" style="padding-top: 1vh;">
        <div class="col-2 bg-light" style="padding: 1vh;min-height: 74vh">
            <div th:insert="~{common/header :: user-silde}"></div>
        </div>
        <div class="col-10">
            <div class="card">
                <div class="card-header">
                    <div class="card-body">
                        <ul class="nav nav-tabs">
                            <li class="nav-item mx-3">
                                <a th:class="${collectionType==0?'nav-link active':'nav-link'}"
                                   th:href="@{/collection(collectionType=0)}">全部</a>
                            </li>

                            <li class="nav-item mx-3">
                                <a th:class="${collectionType==1?'nav-link active':'nav-link'}"
                                   th:href="@{/collection(collectionType=1)}">诗词</a>
                            </li>
                            <li class="nav-item mx-3">
                                <a th:class="${collectionType==2?'nav-link active ':'nav-link'}"
                                   th:href="@{/collection(collectionType=2)}">诗人</a>
                            </li>
                        </ul>

                        <div class="table-responsive" style="min-height: 500px">
                            <table class="table">
                                <thead class="table-light">
                                <tr>
                                    <th>类型</th>
                                    <th>标题</th>
                                    <th>收藏时间</th>
                                    <th>取消</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="collection:${dataInfo.getList()}">
                                    <td>
                                        <em th:text="${collection.collectionType}==1? '诗文':'作者'"></em>
                                    </td>
                                    <td>
                                        <a href="javascript:;"
                                           th:onclick="|resToTarget(${collection.resId},${collection.collectionType})|"
                                           th:text="${collection.resName}"></a>
                                    </td>
                                    <td>
                                        <span th:text="${collection.collectionTime}"></span>
                                    </td>
                                    <td>
                                        <span th:id="'sp_'+${collection.id}" class="collect-cancel"
                                      th:onclick="|doCollection(${collection.id})|">
                                    <i class="fa-solid fa-star"></i>
                                    </span>
                                    </td>

                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--分页-->
                        <th:block th:if="${ dataInfo.getPages()> 1}">
                            <ul class="pagination justify-content-center">
                                <!--总页数小于7-->
                                <th:block th:if="${dataInfo.getPages() < 7}"
                                          th:each="page:${dataInfo.getNavigatepageNums()}">
                                    <li th:class="${page == dataInfo.getPageNum() ? 'page-item active':'page-item'}">
                                        <a th:href="@{/collection(collectionType=${collectionType},pageNum=${page})}"
                                           class="page-link" th:text="${page}"></a>
                                    </li>
                                </th:block>
                                <th:block th:if="${dataInfo.getPages()>= 7}">
                                    <!--当前页小于4-->
                                    <th:block th:if="${dataInfo.getPageNum() < 4}">
                                        <!--前3页-->
                                        <th:block th:each="page:${#numbers.sequence(1,3)}">
                                            <li th:class="${page == dataInfo.getPageNum() ? 'page-item active':'page-item'}">
                                                <a th:href="@{/collection(collectionType=${collectionType},pageNum=${page})}"
                                                   class="page-link" th:text="${page}"></a>
                                            </li>
                                        </th:block>
                                        <!--4、5页-->
                                        <li class="page-item">
                                            <a th:href="@{/collection(collectionType=${collectionType},pageNum=${4})}"
                                               class="page-link">4</a>
                                        </li>
                                        <!--分隔符-->
                                        <li class="page-item mx-2" disabled="">...</li>
                                        <!--最后页-->
                                        <li class="page-item">
                                            <a th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPages()})}"
                                               class="page-link" th:text="${dataInfo.getPages()}"></a>
                                        </li>
                                        <li class="page-item"><a
                                                th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()+1})}"
                                                class="page-link">&gt;</a></li>
                                        <th:block th:if="${dataInfo.getPages()-dataInfo.getPageNum() > 10}">
                                            <li class="page-item"><a
                                                    th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()+10})}"
                                                    class="page-link">&raquo;</a></li>
                                        </th:block>
                                    </th:block>

                                    <th:block th:if="${dataInfo.getPageNum() >= 4}">
                                        <!--当前页小于等于倒数第4-->
                                        <th:block th:if="${dataInfo.getPageNum() <= dataInfo.getPages() - 4}">
                                            <th:block th:if="${dataInfo.getPageNum() > 10}">
                                                <li class="page-item"><a
                                                        th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()-10})}"
                                                        class="page-link">&laquo;</a>
                                                </li>
                                            </th:block>
                                            <li class="page-item"><a
                                                    th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()-1})}"
                                                    class="page-link">&lt;</a></li>
                                            <!--第1页-->
                                            <li class="page-item">
                                                <a th:href="@{/collection(collectionType=${collectionType},pageNum=${1})}"
                                                   class="page-link">1</a>
                                            </li>
                                            <!--分隔符-->
                                            <li class="page-item mx-2" disabled="">...</li>

                                            <li class="page-item">
                                                <a th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()-1})}"
                                                   class="page-link" th:text="${dataInfo.getPageNum() - 1}"></a>
                                            </li>
                                            <li class="page-item active">
                                                <a class="page-link" th:text="${dataInfo.getPageNum()}"></a>
                                            </li>
                                            <li class="page-item">
                                                <a th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()+1})}"
                                                   class="page-link" th:text="${dataInfo.getPageNum() + 1}"></a>
                                            </li>
                                            <!--分隔符-->
                                            <li class="page-item mx-2" disabled="">...</li>
                                            <!--最后页-->
                                            <li class="page-item">
                                                <a th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPages()})}"
                                                   class="page-link" th:text="${dataInfo.getPages()}"></a>
                                            </li>
                                            <li class="page-item"><a
                                                    th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()+1})}"
                                                    class="page-link">&gt;</a></li>
                                            <th:block th:if="${dataInfo.getPages()-dataInfo.getPageNum() > 10}">
                                                <li class="page-item"><a
                                                        th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()+10})}"
                                                        class="page-link">&raquo;</a>
                                                </li>
                                            </th:block>
                                        </th:block>
                                    </th:block>
                                    <!--当前页大于等于4-->
                                    <th:block th:if="${dataInfo.getPageNum() > dataInfo.getPages() - 4}">
                                        <th:block th:if="${dataInfo.getPageNum() > 10}">
                                            <li class="page-item"><a
                                                    th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()-10})}"
                                                    class="page-link ">&laquo;</a></li>
                                        </th:block>
                                        <li class="page-item"><a
                                                th:href="@{/collection(collectionType=${collectionType},pageNum=${dataInfo.getPageNum()-1})}"
                                                class="page-link">&lt;</a></li>
                                        <!--第1页-->
                                        <li class="page-item">
                                            <a th:href="@{/collection(collectionType=${collectionType},pageNum=${1})}"
                                               class="page-link">1</a>
                                        </li>
                                        <!--分隔符-->
                                        <li class="page-item mx-2" disabled="">...</li>
                                        <!--后5页-->
                                        <th:block
                                                th:each="page:${#numbers.sequence(dataInfo.getPages() - 3,dataInfo.getPages())}">
                                            <li th:class="${page == dataInfo.getPageNum() ? 'page-item active':'page-item'}">
                                                <a th:href="@{/collection(collectionType=${collectionType},pageNum=${page})}"
                                                   class="page-link" th:text="${page}"></a>
                                            </li>
                                        </th:block>
                                    </th:block>
                                </th:block>
                            </ul>
                        </th:block>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:insert="~{common/footer ::home-footer}"></div>
<script type="text/javascript" charset="utf-8" th:src="@{/js/collection.js}"></script>

</body>
</html>
